import * as d3 from 'd3'
export class MapChart {
  title = ''
  divId = ''
  data = ''
  jsonData = ''
  addtionData = ''
  toolTipFarmat = ''
  color = d3.scaleOrdinal(d3.schemeCategory10)
  mapChart = {}
  constructor (divId, data, jsonUrl) {
    this.divId = divId
    this.data = data
    this.jsonUrl = jsonUrl
  }

  setToolTipFarmat (farmat) {
    this.toolTipFarmat = farmat
  }

  setData (data) {
    this.data = data
  }

  setJsonData (data) {
    this.jsonData = data
  }

  getPath () {
    return this.mapChart.path
  }

  initChart () {
    this.mapChart.padding = {
      left: 20,
      right: 50,
      top: 20,
      bottom: 20
    }
    this.mapChart.divHeight = document.getElementById(this.divId).offsetHeight - this.mapChart.padding.top - this.mapChart
      .padding.bottom
    this.mapChart.divWidth = document.getElementById(this.divId).offsetWidth - this.mapChart.padding.left - this.mapChart
      .padding.right

    this.mapChart.svg = d3.select('#' + this.divId).append('svg')
      .attr('width', this.mapChart.divWidth + this.mapChart.padding.left + this.mapChart.padding.right)
      .attr('height', this.mapChart.divHeight + this.mapChart.padding.top + this.mapChart.padding.bottom)
      .attr('class', 'svg_mapChart')

    this.mapChart.projection = d3.geoMercator()
      .center([107, 34])
      .scale(Math.min(this.mapChart.divHeight, this.mapChart.divWidth))
      .translate([this.mapChart.divWidth / 2, this.mapChart.divHeight / 2])
    this.mapChart.path = d3.geoPath()
      .projection(this.mapChart.projection)

    // this.mapChart.tooltip = d3.componentsTooltip({
    //   defsContainer: this.mapChart.svg
    // })
    //   .container(this.mapChart.svg)
    //   .content(this.toolTipFarmat)
  }

  draw () {
    this.drawMap()
    this.drawPoints()
    this.drawLegend()
  }
  drawMap () {
    let mapChart = this.mapChart
    // let color = this.color

    let drag = d3.drag() // d3.drag() 创建一个拖曳行为
      .on('drag end', function (d) {
        d.x = d3.event.x
        d.y = d3.event.y
        d3.select(this)
          .attr('transform', 'translate(' + d.x + ',' + d.y + ')scale(' + d.k + ')')
      })

    let zoom = d3.zoom()
      .scaleExtent([1 / 2, 7])
      .on('zoom', function (d) {
        d.x = d3.event.transform.x
        d.y = d3.event.transform.y
        d.k = d3.event.transform.k
        d3.select(this)
          .attr('transform', 'translate(' + d.x + ',' + d.y + ')scale(' + d.k + ')')
      })

    let map = mapChart.svg.selectAll('.map')
      .data([{
        x: 0,
        y: 0,
        k: 1
      }])
      .enter()
      .append('g')
      .attr('class', 'map')
      .call(drag)
      .call(zoom)

    let paths = map.selectAll('.path')
      .data(this.jsonData.features)
      .enter()
      .append('g')
      .attr('class', 'path')

    paths.append('path')
      .attr('d', mapChart.path)
      .style('stroke', '#000')
      .style('stroke-width', 1)
      .style('fill', '#ddd')

    paths.append('text')
      .attr('transform', d => 'translate(' + mapChart.path.centroid(d) + ')')
      .text(d => d.properties.name)
      .attr('font-size', 8)
  }

  drawPoints () {
    let category = this.mapChart.svg.select('.map')
      .selectAll('.category')
      .data(this.data)
      .enter()
      .append('g')
      .attr('class', 'category')

    let circles = category.filter(function (d) {
      return d.shape === 'circle'
    })

    let points = circles.selectAll('.point')
      .data(d => d.data)
      .enter()
      .append('g')
      .attr('class', 'point')

    // points.on('mouseenter', (d, i) => {
    //   let subX = this.mapChart.divWidth / 2 + this.mapChart.padding.left
    //   let direction = d3.event.x - subX <= this.mapChart.divWidth / 2 ? 'left' : 'right'
    //   subX = (direction === 'right') ? (subX + this.mapChart.padding.left) : subX
    //   this.mapChart.tooltip
    //     .textColor('white')
    //     .tooltipFill('teal')
    //     .x(d3.event.offsetX)
    //     .y(d3.event.offsetY)
    //     .direction(direction)
    //     .show(d.tooltip)
    // })
    //   .on('mouseleave', d => this.mapChart.tooltip.hide())

    points.append('circle')
      .attr('cx', d => d.position[0])
      .attr('cy', d => d.position[1])
      .attr('r', 3)
      .style('fill', d => {
        return d.color
      })

    let imgs = category.filter(function (d) {
      return d.shape === 'img'
    })

    let img = imgs.selectAll('.img')
      .data(d => d.data)
      .enter()
      .append('g')
      .attr('class', 'img')

    // img.on('mouseenter', (d, i) => {
    //   let subX = this.mapChart.divWidth / 2 + this.mapChart.padding.left
    //   let direction = d3.event.x - subX <= this.mapChart.divWidth / 2 ? 'left' : 'right'
    //   subX = (direction === 'right') ? (subX + this.mapChart.padding.left) : subX
    //   this.mapChart.tooltip
    //     .textColor('white')
    //     .tooltipFill('teal')
    //     .x(d3.event.offsetX)
    //     .y(d3.event.offsetY)
    //     .direction(direction)
    //     .show(d.tooltip)
    // })
    //   .on('mouseleave', d => this.mapChart.tooltip.hide())

    img.append('image')
      .attr('x', d => d.position[0])
      .attr('y', d => d.position[1])
      .attr('xlink:href', d => {
        return d.imgUrl
      })
      .attr('width', 7)
      .attr('height', 7)
  }

  drawLegend () {
    let legendWidth = 15
    let legendHeight = 15
    let yStart = this.mapChart.divHeight - legendHeight * this.data.length -
      this.mapChart.padding.bottom

    let legends = this.mapChart.svg
      .append('g')
      .attr('class', 'legends')

    let legend = legends.selectAll('.legend')
      .data(this.data)
      .enter()
      .append('g')
      .attr('class', 'legend')

    let index = 0
    legend.filter(function (d) {
      return d.shape === 'circle'
    })
      .append('rect')
      .attr('x', this.mapChart.padding.left)
      .attr('y', (d, i) => {
        index = i
        return yStart + legendHeight * i
      })
      .attr('width', legendWidth)
      .attr('height', legendHeight - 5)
      .style('fill', d => d.itemColor)

    legend.filter(function (d) {
      return d.shape === 'img'
    })
      .append('image')
      .attr('x', this.mapChart.padding.left)
      .attr('y', (d, i) => {
        index = index === 0 ? index : index + 1
        return yStart + legendHeight * index
      })
      .attr('width', legendWidth)
      .attr('height', legendHeight - 5)
      .attr('xlink:href', d => {
        return d.data[0].imgUrl
      })

    legend.append('text')
      .attr('x', this.mapChart.padding.left + legendWidth * 1.2)
      .attr('y', (d, i) => (yStart + legendHeight * i + legendHeight / 2))
      .text(d => d.category)
      .attr('font-size', 10)

    // 标题
    this.mapChart.svg.append('text')
      .attr('x', this.mapChart.divWidth * 0.45)
      .attr('y', this.mapChart.padding.top * 1.5)
      .text(this.title)
      .attr('font-weight', 'bold')
  }
}
